<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="dns-prefetch" href="http://jxpxxzj.oschina.io">
  <title>网页设计大赛记录 | 雄心万丈, 躺在床上</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <meta name="description" content="序比赛终于是结束了, 意料之外拿到了1=, 写一篇东西稍微记录下第一次参加学院组织的比赛的经历. 
选题2016-11-04出的题, 原新闻看到这四个题目我的内心是有点崩溃的, 感觉一个比一个难做. 院网改善不好展开(当初这么认为), 学生机构除了科协的一个小小区域都不了解, 学风大比拼我都不知道这活动什么情况, 红军长征实在是不感冒. 后来就在院网改善和红军长征两个里想了很久, 最终选定了院网改">
<meta property="og:type" content="article">
<meta property="og:title" content="网页设计大赛记录">
<meta property="og:url" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/index.html">
<meta property="og:site_name" content="雄心万丈, 躺在床上">
<meta property="og:description" content="序比赛终于是结束了, 意料之外拿到了1=, 写一篇东西稍微记录下第一次参加学院组织的比赛的经历. 
选题2016-11-04出的题, 原新闻看到这四个题目我的内心是有点崩溃的, 感觉一个比一个难做. 院网改善不好展开(当初这么认为), 学生机构除了科协的一个小小区域都不了解, 学风大比拼我都不知道这活动什么情况, 红军长征实在是不感冒. 后来就在院网改善和红军长征两个里想了很久, 最终选定了院网改">
<meta property="og:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/1.png">
<meta property="og:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/2.png">
<meta property="og:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/3.png">
<meta property="og:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/4.png">
<meta property="og:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/5.png">
<meta property="og:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/6.png">
<meta property="og:updated_time" content="2017-02-13T05:20:12.797Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="网页设计大赛记录">
<meta name="twitter:description" content="序比赛终于是结束了, 意料之外拿到了1=, 写一篇东西稍微记录下第一次参加学院组织的比赛的经历. 
选题2016-11-04出的题, 原新闻看到这四个题目我的内心是有点崩溃的, 感觉一个比一个难做. 院网改善不好展开(当初这么认为), 学生机构除了科协的一个小小区域都不了解, 学风大比拼我都不知道这活动什么情况, 红军长征实在是不感冒. 后来就在院网改善和红军长征两个里想了很久, 最终选定了院网改">
<meta name="twitter:image" content="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/1.png">
  
    <link rel="alternative" href="/atom.xml" title="雄心万丈, 躺在床上" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  
  
</head></html>
<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="https://en.gravatar.com/userimage/114716744/58f3842dbf28498a4087b85f00b33de4.jpg?size=300" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">jxpxxzj</a></h1>
		</hgroup>

		
		<p class="header-subtitle">我们最怕看到的未来是, 我们不守规矩, 以为这是聪明, 是特权, 是优越感。</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/categories/随笔/">随笔</a></li>
	        
				<li><a href="/categories/技术/">技术</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
            
    			
            
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/jxpxxzj" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/jxpxxzj" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
		        
					<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/zijin-xiao" title="zhihu"><i class="icon-zhihu"></i></a>
		        
					<a class="mail" target="_blank" href="mailto:ZijinX@outlook.com" title="mail"><i class="icon-mail"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>
    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">jxpxxzj</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="https://en.gravatar.com/userimage/114716744/58f3842dbf28498a4087b85f00b33de4.jpg?size=300" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">jxpxxzj</h1>
			</hgroup>
			
			<p class="header-subtitle">我们最怕看到的未来是, 我们不守规矩, 以为这是聪明, 是特权, 是优越感。</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/categories/随笔/">随笔</a></li>
		        
					<li><a href="/categories/技术/">技术</a></li>
		        
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/jxpxxzj" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/jxpxxzj" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
			        
						<a class="zhihu" target="_blank" href="https://www.zhihu.com/people/zijin-xiao" title="zhihu"><i class="icon-zhihu"></i></a>
			        
						<a class="mail" target="_blank" href="mailto:ZijinX@outlook.com" title="mail"><i class="icon-mail"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>
      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionheight="100" data-contentid="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            <article id="post-softcsu-website" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        <h1 class="article-title" itemprop="name">
      网页设计大赛记录
    </h1>
        <a href="/2016/12/24/softcsu-website/" class="archive-article-date">
  	<time datetime="2016-12-24T03:36:46.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-24</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="序"><a href="#序" class="headerlink" title="序"></a>序</h2><p>比赛终于是结束了, 意料之外拿到了1=, 写一篇东西稍微记录下第一次参加学院组织的比赛的经历. </p>
<h2 id="选题"><a href="#选题" class="headerlink" title="选题"></a>选题</h2><p>2016-11-04出的题, <a href="http://software.csu.edu.cn/info/1072/3883.htm" target="_blank" rel="external">原新闻</a><br>看到这四个题目我的内心是有点崩溃的, 感觉一个比一个难做. 院网改善不好展开(当初这么认为), 学生机构除了科协的一个小小区域都不了解, 学风大比拼我都不知道这活动什么情况, 红军长征实在是不感冒. 后来就在院网改善和红军长征两个里想了很久, 最终选定了院网改善.</p>
<p>顺带找了下<a href="http://software.csu.edu.cn/info/1073/2352.htm" target="_blank" rel="external">去年的题</a>, 有一个是介绍常用软件, 怎么想这个题目的可拓展性都比今年这四个奇葩好吧. </p>
<h2 id="设计"><a href="#设计" class="headerlink" title="设计"></a>设计</h2><p>这次比赛设计上花的时间确实是前所未有的长, 目的很简单, 就是为了摸索一套最合适的方案, 留给以后用.</p>
<h3 id="艺术设计"><a href="#艺术设计" class="headerlink" title="艺术设计"></a>艺术设计</h3><p>选题的时候同时也看了看去年的一些作品, 一等奖的作品整体上看, 设计偏混乱, 没有统一设计语言, 随处可见套模板和代码复制等; 另一个软件学院官网的, 感觉没有跳出桎梏, 依然是非常传统的教育网站设计.</p>
<p>所以给设计定调就确立了一些基本原则, 要求的是设计语言必须统一, 同时趋近于现代化的网页, 也要跳出之前改善型网站的固定页面结构. 最终就成了现在的作品, 设计规范统一, 扁平化+阴影(Material Design 的思想), 以及非常独特的页面结构(osu!next 的设计风格).</p>
<p>这次主要还是为了练手, 所以就制定了一套流程, 从手绘设计稿开始(感谢 ThinkPad X1 Yoga 的电磁屏, 能让我跳过从纸稿到电子手稿的过程), 然后就是用 Photoshop 做全图, 最后切图.<br>放一张当初的手稿, 这个是列表页的雏形, 字丑就不要吐槽了, 都被说了多少年了<br><img src="/2016/12/24/softcsu-website/1.png" alt="1.png" title=""><br>以及 PS 出的首页图(和最终效果有一点区别, 但是整体接近)<br><img src="/2016/12/24/softcsu-website/2.png" alt="2.png" title=""></p>
<p>其实我不太会搞这些, 不管是设计软件使用还是具体的设计上, 也就是一个尝试与学习的过程, exp++.  </p>
<h3 id="架构设计"><a href="#架构设计" class="headerlink" title="架构设计"></a>架构设计</h3><p>这个还是我主要在做的事, 就是设计一套合理的技术栈, 方便开发.</p>
<p>之前我写东西都是想到什么写什么, 然后把各式各样的都堆在一起, 怎么爽怎么来, 认识到问题的时候就已经晚了, 所以这次着重关注了这方面. 另外一个驱动就是学习新技术和感受互联网氛围, 泡了那么久知乎, 还没有真正玩过这些比较NB的东西.</p>
<h4 id="前端"><a href="#前端" class="headerlink" title="前端"></a>前端</h4><p>前端框架方面在 <a href="https://facebook.github.io/react/" target="_blank" rel="external">React</a> , <a href="https://cn.vuejs.org/" target="_blank" rel="external">Vue</a> 和 <a href="https://angularjs.org/" target="_blank" rel="external">Angular</a> 之间挑了很久, 主要还是在语法习惯和生态环境的影响. React 有个我很喜欢的设计 <a href="http://ant.design" target="_blank" rel="external">Ant Design</a> , 但是 jsx 的那种奇葩写法让我感觉很蛋疼, Angular 显得有点重, 最后选择了 Vue 的生态.</p>
<p>前端框架的另一个好处是有不只是 CSS 的 UI 套件, 比如我用的 <a href="http://element.eleme.io/" target="_blank" rel="external">Element-UI</a> . 当初选这个的时候, 因为定调了扁平化,很自然的想到先去找 Material Design 的组件,  找到的几个要不是做的比较粗糙, 要不是给移动端做的不适合给桌面. 后来一想 Material Design 那种设计冲击感太强了, 用来做正经网站好像不太合适, 在 <a href="https://n3-components.github.io/N3-components/" target="_blank" rel="external">N3-Components</a> 和 Element-UI 中选了后者. 有一个 <a href="https://okoala.github.io/vue-antd/#!/docs/introduce" target="_blank" rel="external">Antd Vue</a> 本来很中意, 但是它的 repo 许久没有 commit , 甚至作者自己都不推荐用, 无奈放弃. </p>
<p>然后就开始研究 <a href="https://nodejs.org/en/" target="_blank" rel="external">Node.js</a> 了, 不得不说 <a href="https://www.npmjs.com/" target="_blank" rel="external">npm</a> 是一个超级爽的包管理器, 安装什么都特别方便, 还能管理好依赖啊一大堆, 相比 .NET 开发自己找 Assembly 的 dll 然后处理依赖(当时不会用 <a href="https://www.nuget.org/" target="_blank" rel="external">Nuget</a> , 现在这个问题也解决的差不多了). 效率上提升了不知道高到哪里去了. Node.js 的主要工作还是用来构建, 从 <a href="http://gruntjs.com/" target="_blank" rel="external">grunt</a> 换到 <a href="http://gulpjs.com/" target="_blank" rel="external">gulp</a> , 然后是 <a href="https://webpack.github.io/" target="_blank" rel="external">webpack</a>. webpack 是个更神奇的东西, import 一切的那种感觉是之前从未有过的.</p>
<p>Vue 的生态问题, 以前其实我没听说过 Single Page App 这种设计, 但是自己想过这种事, 就是用 js 解析 url 然后做转发. 了解了 <a href="https://router.vuejs.org/" target="_blank" rel="external">Vue-Router</a> 和 SPA 的设计理念后, 深刻的认识到了轮子满世界都是…配合 webpack 简直不能更爽, 还能模拟一下 404 页面这种功能.<br><a href="https://github.com/pagekit/vue-resource" target="_blank" rel="external">Vue-Resources</a> 应该是部分替代了 <a href="https://jquery.com/" target="_blank" rel="external">jQuery</a> 的 $.ajax 这些功能, Promise 比 callback 的体验还是好的多的.</p>
<p>最后前端的开发环境和技术架构大约是这样, 两张图来源于答辩 Presentation<br><img src="/2016/12/24/softcsu-website/3.png" alt="3.png" title=""><br><img src="/2016/12/24/softcsu-website/4.png" alt="4.png" title=""></p>
<h4 id="后端"><a href="#后端" class="headerlink" title="后端"></a>后端</h4><p>后端这部分搞的确实比前端多, 很自然的选定了 <a href="https://www.asp.net/" target="_blank" rel="external">ASP.NET</a> + <a href="https://www.mysql.com/" target="_blank" rel="external">MySQL</a> 的组合, 不用 <a href="https://secure.php.net/" target="_blank" rel="external">php</a> 的感觉是构建大型应用时总感觉有点力不从心(或者没找到合适的框架?). 曾有那么一个瞬间想用 <a href="https://www.mongodb.com/" target="_blank" rel="external">MongoDB</a> 或者 <a href="https://redis.io/" target="_blank" rel="external">Redis</a> 的, 又比对了一下场景, 感觉好像没什么需求, 就选了最熟悉的这套技术栈.</p>
<p>本来这个叫网页设计大赛, 后端应该不是重点. 搞后端的目的是为了玩出花样, 就写了个爬虫从院网爬数据回来然后发给前端. 院网那个设计真的是烂, 静态解析 html 和浏览器解析出来的 XPath 各种不一样, 懒得仔细研究了, 还好每一类页面的结构都是一致的, 确定一次后就不用再改了.</p>
<p>引入自然语言处理和 <a href="https://www.java.com/zh_CN/" target="_blank" rel="external">Java</a> 是做到一半才想的事, 目的还是为了玩点花样. 这部分用 <a href="https://www.python.org/" target="_blank" rel="external">Python</a> 可能更方便点, 但是在配环境上遇到了一些小问题,  <a href="https://pypi.python.org/pypi/pip" target="_blank" rel="external">pip</a> 还特别慢, 最后投靠了 Java . <a href="http://www.ikvm.net/" target="_blank" rel="external">IKVM.NET</a> 真的是个神奇的东西, 非常完美的把 <a href="http://hanlp.linrunsoft.com/" target="_blank" rel="external">HanLP</a> 塞进了 .NET 下.</p>
<p>后端的架构, 同样来自答辩 Presentation<br><img src="/2016/12/24/softcsu-website/5.png" alt="5.png" title=""></p>
<h4 id="踩过的坑"><a href="#踩过的坑" class="headerlink" title="踩过的坑"></a>踩过的坑</h4><p>太多了, 我觉得这个可以单独一篇文章出来讲. </p>
<p>讲个关于反爬虫的. 在比赛进行期间一切都很顺利, <a href="https://msdn.microsoft.com/zh-cn/library/system.net.webclient.aspx" target="_blank" rel="external">WebClient</a> 工作很正常. 但是比赛结束后准备答辩的那段时间突然就发现后端挂掉了, 赶紧去检查. 出现了奇怪的 <a href="https://msdn.microsoft.com/zh-cn/library/system.net.webexception.aspx" target="_blank" rel="external">WebException</a> , 感觉是院网开了反爬虫机制. 之前我为了缓存全院网的内容确实对整个网站扫过三四遍, 估计是被发现了?<br>本来以为这种 CMS 系统都有比较高级的方法, 去 <a href="https://stackoverflow.com/" target="_blank" rel="external">Stack Overflow</a> 上找了找, 推荐的一些方法都没效果. 用 <a href="http://www.telerik.com/fiddler" target="_blank" rel="external">Fiddler</a> 抓了个包, 比对了一下浏览器和 WebClient 的请求, 顺手把 Headers 给抄了过来:<br><figure class="highlight csharp"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">wc.Headers.Add(<span class="string">"Content-Type: text/html"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"Referer: http://software.csu.edu.cn/index.htm"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"Accept-Language: en-US,en;q=0.8,zh-Hans-CN;q=0.6,zh-Hans;q=0.4,ja;q=0.2"</span>);</div><div class="line">wc.Headers.Add(<span class="string">"Accept: text/html, application/xhtml+xml, image/jxr, */*"</span>);</div></pre></td></tr></table></figure></p>
<p>居然就可以了…</p>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><p>前端代码写的其实不算特别漂亮, 主要还是因为经验不足, 不过最后貌似吸引了不少注意力. 考虑这是篇记录性的文章, 不太展开讲了.</p>
<p>主要页面拆分了 HTML , CSS 和 JS , 复用化的组件用的是 .vue 单文件, 最后 webpack 全部塞到一起, 很简单粗暴的一种做法, 具体实现可以去文末的 GitHub 看.</p>
<p>后端就是 Model + Controller 以及一些其他的辅助类, 简单粗暴.</p>
<h2 id="答辩"><a href="#答辩" class="headerlink" title="答辩"></a>答辩</h2><p>要搞答辩的消息是从某个学长那听说的, 个人认为这是个好事, 有机会给评审者展示自己的一些思想, 同时还能刷刷脸. 最终成绩好还能搞点福利, 何乐而不为呢? 倒是真的要开始准备了, 心里就没什么底了…</p>
<p>一切要从一张图讲起:<br><img src="/2016/12/24/softcsu-website/6.png" alt="6.png" title=""><br>我这种平时过得很粗糙的人, 突然要我穿帅一点, 对我来说是个莫大的挑战…发现服装不计分, 我就先把这事放一边然后研究 Presentation 去了.</p>
<p>之前确实没搞过这种形式, 这次主要也是摸索和学习, 尽量提前发现一些问题.</p>
<h3 id="准备"><a href="#准备" class="headerlink" title="准备"></a>准备</h3><p>答辩主要还是 Presentation 和讲稿, 从某 Office 网站上下了个模板然后随便改了改就定了调. 其实我有点担心我下的这种排名靠前的还是热门的模板, 会不会到时候到现场和别人的撞在一起了. 事实上这种情况没出现, 但是我觉得应该引起重视, 能原创一些尽量原创, 真撞在一起了会显得很尴尬的.</p>
<p>Presentation 做的比较草率, 分了三部分然后从不同角度对作品进行阐述, 在这方面我就只能算中流水准, 比某些半屏幕字的好, 但是比不上设计很灵动的. 讲稿算是细心研究了一下, 揣摩了很多用词, 尽量扬长避短, 让评委老师不要太关注一些问题, 也发给了一些人做评价, 反馈基本上还可以.</p>
<p>后来想起来穿帅一点的事,于是答辩前一天去搞了一身正装, 不过我这种从乡下来的人并不知道怎么穿这种上档次的衣服, 出门前还仔细研究了一下, 结果还是出了点小问题. 虽然穿帅一点不能直接加分, 但是能给人一种良好的印象, 说明重视这场比赛, 可能造成一些隐性影响.</p>
<h3 id="现场"><a href="#现场" class="headerlink" title="现场"></a>现场</h3><p>那天下了不小的雨, 还有点冷, 因为下午还有节课所有披了一件比较厚的衣服御寒. 上完课顶着大雨去现场, 结果围着B座转了一圈居然没找到教室, 后来重新看了下路牌找到了地方.</p>
<p>进教室先是抽签, 其实最早我有些问题, 比如站位, 看稿子等问题, 心想应该不会抽到1号, 先看看别人怎么做总是没错的, 顺利地抽到了8. 然后找了个地方就坐下来了, 然后一直在发呆也没想去测试一下设备什么的. 看看别的队带了队友的都在调试交流, 就我在发呆感觉好奇怪.</p>
<p>一个一个看下来, 各种选题都有, 特别关注了选了院网改善的题的几组, 确实出现了我之前预测的一些问题, 信心又增长了一点.  </p>
<p>然后轮到我上场了, 顺利的讲完然后进入回答问题, 结果就问了些比如为什么要把 .NET 和 Java 混在一起等奇怪的问题, 完美的绕开了我之前准备的几个可能发问的点, 重心就跑到了说一个人一支队伍这种行为不好不好云云, 拖过了三分钟, 就算结束了.</p>
<p>下场后又是发呆等成绩, 帮我打杂的基友已经跑了, 就剩我在现场. 出分的时候我是感到有点震惊的, 虽然我对自己的作品还有点信心, 但是超过第二名将近4分让我感到很不可思议. 等第9组和第10组出成绩的时候是有点忐忑的, 毕竟选的都是院网改善, 也挺有竞争力的, 后来出分也就是平均水准. 最终我也成了全场唯一一个超过 80 分, 接近 81 分的组, 顺理成章的拿到了1=.</p>
<p>拍完照散场又被辅导员抓去说了一顿, 看来这个问题在这里显得特别严重, 而且似乎一人一组在最早评分的时候是会有负加成的.</p>
<h2 id="一些遗憾"><a href="#一些遗憾" class="headerlink" title="一些遗憾"></a>一些遗憾</h2><p>作品完成度确实不算很高, 有些单独的页面没有做, Responsive 没有做, 多浏览器没有仔细适配, 用的大量开发技术不兼容低版本浏览器等. 这些其实都有影响, 尤其是对于一个有点政治色彩的网站. 现在的院网为了做个漂亮的标题还用了Flash这种古董, 设计上也很古董, 估计就是为了兼容的妥协.</p>
<p>后端做的也不是特别好, 有些基于数据库的功能和全院分析没做, 工期什么确实紧, 我也比较懒还有些其他的事堆在一起就不了了之了, 还好没什么影响.</p>
<h2 id="杂谈"><a href="#杂谈" class="headerlink" title="杂谈"></a>杂谈</h2><p>最早看到比赛消息的时候, 我比较担心的事情是能不能找到队友, 和有没有时间去做这些, 后来拖得太久了, 这两件事都没解决, 但是感觉浪费了机会又不太好, 然后就决定自己一个人搞然后随便糊个作品上去, 证明我参加了就行. 真的没有考虑拿奖的事, 纯属意外?</p>
<p>这两件事迟早得解决的, 队友目前似乎有点起色, 时间的话可能需要我对现状做出一些改变, 才会有所成效. 毕竟寒假还有个程序设计竞赛, 那个应该才是重头戏.</p>
<h2 id="祭"><a href="#祭" class="headerlink" title="祭"></a>祭</h2><p>GitHub: <a href="https://github.com/jxpxxzj/softcsu-website" target="_blank" rel="external">softcsu-website</a><br>包含全部前端代码</p>
<p>感谢 <a href="https://github.com/BLumia" target="_blank" rel="external">BLumia</a> 帮我用一种优雅的方式解决了 footer 的固定问题.</p>
      

      
    </div>
    <div class="article-info article-info-index">
      
      <div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/NET/">.NET</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Vue/">Vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/答辩/">答辩</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/随笔/">随笔</a></li></ul>
	</div>
      <div class="article-category tagcloud">
	<i class="icon-book icon"></i>
	<a class="article-category-link" href="/categories/随笔/">随笔</a>
	</div>
      

      
        <div class="share-btn share-icons tooltip-left">
  <div class="tooltip tooltip-east">
    <span class="tooltip-item">
      <a href="javascript:;" class="share-sns share-outer">
        <i class="icon icon-share"></i>
      </a>
    </span>
    <span class="tooltip-content">
      <div class="share-wrap">
        <div class="share-icons">
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="icon icon-weibo"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="icon icon-weixin"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="icon icon-qq"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="icon icon-douban"></i>
          </a>
          <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a>
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="icon icon-facebook"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="icon icon-twitter"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="icon icon-google"></i>
          </a>
        </div>
      </div>
    </span>
  </div>
</div>

<div class="page-modal wx-share js-wx-box">
    <a class="close js-modal-close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="http://s.jiathis.com/qrcode.php?url=http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/" alt="微信分享二维码">
    </div>
</div>

<div class="mask js-mask"></div>
      
      <div class="clearfix"></div>
    </div>
  </div>
</article>

  <nav id="article-nav">
  
    <a href="/2017/02/12/impl-pcm-fe/" id="article-nav-newer" class="article-nav-link-wrap">
      <i class="icon-circle-left"></i>
      <div class="article-nav-title">
        
          Private-Cloud-Music 的前端实现
        
      </div>
    </a>
  
  
    <a href="/2016/12/24/celebration/" id="article-nav-older" class="article-nav-link-wrap">
      <div class="article-nav-title">萍乡中学110周年校庆repo</div>
      <i class="icon-circle-right"></i>
    </a>
  
</nav>





<div class="duoshuo">
	<!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="softcsu-website" data-title="网页设计大赛记录" data-url="http://jxpxxzj.oschina.io/2016/12/24/softcsu-website/"></div>
	<!-- 多说评论框 end -->
	<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
	<script type="text/javascript">
	var duoshuoQuery = {short_name:"jxgithub"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
	<!-- 多说公共JS代码 end -->
</div>
          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2017 jxpxxzj
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: true,
		isHome: false,
		isPost: true,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		root: "/",
		innerArchive: false
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    }
});

MathJax.Hub.Queue(function() {
    var all = MathJax.Hub.getAllJax(), i;
    for(i=0; i < all.length; i += 1) {
        all[i].SourceElement().parentNode.className += ' has-jax';                 
    }       
});
</script>

<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
    <div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    

    

    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
